<!DOCTYPE html>
<html>
<head>
    <%- include("./head.html", undefined) %>
    <style media="screen">
    body {
        background-color: #F5F5F5;
    }
    body > .grid {
        height: 100%;
    }
    .image {
        margin-top: -100px;
    }
    .column {
        max-width: 450px;
    }
    </style>
</head>
<body>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui blue image header">
                <img src="/static/images/1.jpg" class="ui tiny avatar image">
                <div class="blue content">
                    Log-in to your account
                </div>
            </h2>
            <form class="ui large form" action="/login" method="POST">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="username" placeholder="Username">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="Password">
                        </div>
                    </div>
                    <button class="ui fluid large blue submit button" type="submit">Login</div>
                </div>
            </form>
        </div>
    </div>

    <%- include("./scripts.html", undefined) %>

</body>
</html>
